<!DOCTYPE HTML>
<html>
<head>
<meta charset="UTF-8">
<meta name="viewport"
        content="width=device-width, initial-scale=1.0">
<meta name="HandheldFriendly" content="true">
<title>Sample</title>
<style>
body {
	font-family: 微软雅黑, 'Microsoft YaHei', \5FAE\8F6F\96C5\9ED1, sans-serif;
}
</style>
</head>
<body>
<button onclick="javascript:setItem('user', 'zhang-yafei');">
   设置user键
</button>
<button onclick="javascript:getItem('user');">
   显示user 键的值
</button>
<button onclick="javascript:removeItem('user');">
   删除user键
</button>
<div id="myDiv" style="background:#EEE;width:315px;min-height:50px;padding:10px;border:2px #ccc dashed;"></div>
<script type="text/javascript">
// ===============================================================
// 定义事件函数，监听存储区域变化
function storageHandler(event) {
   var myDiv = document.getElementById("myDiv");
   myDiv.innerHTML = "存储发生了变化：<br /><b> " +
               event.key +"</b> 键改变了<br />旧值<b> " +
               event.oldValue +"</b> 被改变为为新值<b> " +
               event.newValue + "</b> <br />发生更改所在的网址：<b> " +
               event.url + "</b> ";
}
window.onstorage = storageHandler;
// ===============================================================
// 定义当前域
var strDomain = "127.0.0.1";
var oStorage;
try{
   // 获取存储区域
   oStorage = window.localStorage ? window.localStorage : window.globalStorage[strDomain];
}catch(err){
   alert(err.message?err.message:err.toString());
} 

// 定义三个函数分别用来执行创建键、显示键值、删除键操作
function setItem(key,value) {
   oStorage.setItem(key, value);
   alert("DOM Storage:" + key + " = " + value);
}
function getItem(key) {
   var myDiv = document.getElementById("myDiv");
   myDiv.innerHTML = oStorage.getItem(key);
}
function removeItem(key) {
   oStorage.removeItem(key)
   alert("键" + key +"被删除了");
}
</script>
</body>
</html>
